<script setup>
import CustomNavbar from './components/CustomNavbar.vue'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 功能卡片数据
const features = ref([
  {
    id: 1,
    title: '头发染色',
    description: '使用 AI 技术为照片中的人物头发更换颜色',
    image: '/static/images/home/hairRecolor.png',
    type: 'hairReColor'
  },
  {
    id: 2,
    title: '美容美颜',
    description: '智能美化面部，让您更加光彩照人',
    image: '/static/images/home/faceBeauty.png',
    type: 'faceBeauty'
  },
  {
    id: 3,
    title: '二次元风',
    description: '将照片转换为动漫风格，展现独特的艺术效果',
    image: '/static/images/home/convertoAnime.png',
    type: 'convertToAnime'
  }
])

// 导航到功能页面
const navigateToFeature = (type) => {
  uni.switchTab({
    url: '/pages/app/app',
    success: () => {
      // 事件传递
      if (uni.$emit) uni.$emit('switch-app-type', type)
      // 本地缓存
      uni.setStorageSync('appType', type)
    }
  })
}

onLoad(() => {
  console.log('首页加载完成')
})
</script>

<template>
  <CustomNavbar />

  <view class="home-container">
    <!-- 欢迎区域 -->
    <view class="welcome-section">
      <text class="welcome-title">欢迎使用 猎图图</text>
      <text class="welcome-desc">探索 AI 驱动的图像处理功能，让您的创意无限可能</text>
    </view>

    <!-- 功能卡片区域 -->
    <view class="features-grid">
      <view class="features-row">
        <view
          class="feature-card"
          v-for="feature in features"
          :key="feature.id"
          @click="navigateToFeature(feature.type)"
        >
          <view class="feature-image">
            <image
              :src="feature.image"
              mode="aspectFill"
              class="feature-img"
            />
          </view>
          <view class="feature-content">
            <text class="feature-title">{{ feature.title }}</text>
            <text class="feature-desc">{{ feature.description }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.home-container {
  max-width: 750rpx;
  margin: 0 auto;
  padding: 20rpx;
}

.welcome-section {
  text-align: center;
  margin-bottom: 40rpx;
  padding: 40rpx 20rpx;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
  border-radius: 16rpx;
}

.welcome-title {
  display: block;
  font-size: 50rpx;
  color: #2c3e50;
  margin-bottom: 32rpx;
  font-weight: bold;
}

.welcome-desc {
  display: block;
  font-size: 24rpx;
  color: #5c6b7f;
  max-width: 600rpx;
  margin: 0 auto;
  line-height: 1.5;
}

.features-grid {
  margin-bottom: 40rpx;
}

.features-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10rpx;
}

.feature-card {
  width: calc(50% - 20rpx);
  margin: 0 10rpx 20rpx;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.feature-card:active {
  transform: translateY(-10rpx);
}

.feature-image {
  height: 200rpx;
  overflow: hidden;
}

.feature-img {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.feature-card:active .feature-img {
  transform: scale(1.05);
}

.feature-content {
  padding: 20rpx;
}

.feature-title {
  display: block;
  font-size: 30rpx;
  color: #2c3e50;
  margin-bottom: 24rpx;
  font-weight: bold;
}

.feature-desc {
  display: block;
  color: #5c6b7f;
  font-size: 24rpx;
  line-height: 1.4;
  min-height: 96rpx;
}

/* 移动端适配 */
@media (max-width: 750rpx) {
  .home-container {
    padding: 10rpx;
  }

  .welcome-section {
    padding: 20rpx 10rpx;
    margin-bottom: 20rpx;
  }

  .welcome-title {
    font-size: 36rpx;
  }

  .welcome-desc {
    font-size: 20rpx;
  }

  .feature-card {
    width: calc(100% - 20rpx);
    margin-bottom: 15rpx;
  }

  .feature-image {
    height: 200rpx;
  }

  .feature-content {
    padding: 10rpx;
  }

  .feature-title {
    font-size: 24rpx;
  }

  .feature-desc {
    font-size: 18rpx;
    min-height: 80rpx;
  }
}
</style>
